<template>
  <div :class="tdClass">
    <span class="before-line" v-if="root !== 0 && nodes !== 1" :style="{'left':model.bLeft + 'px'}"></span>
    <table>
      <tr>
        <td :colspan="colSpan">
          <table class="table-list" style="background: #ffffff;">
            <tr class="leve" :class="levelClass">
              <td class="td0">{{model.id}}</td>
              <td class="td1">
                <div class="td-title" @dblclick="handlerExpand(model)" style="display: flex;align-items: center">
                  <span v-if="model.children.length > 0" class="has-child iconfont icon-arrow-right-copy" :class="{'has-child iconfont icon-jiantou-copy-copy':model.isExpand}"
                        @click="handlerExpand(model)"></span>
                  <a class="ellipsis" style="display: inline-block">
                    <!--<i class="t-icon m-dep"></i>-->
                    <span :title="model.menuText">{{model.menuText}}</span>
                    <!--<span v-if="model.sysType === 1">大数据处理</span>
                    <span v-if="model.sysType === 2">大数据支撑</span>
                    <span v-if="model.sysType === 3">大数据共享交换</span>
                    <span v-if="model.sysType === 4">大数据服务</span>
                    <span v-if="model.sysType === 5">大数据治理</span>-->
                  </a>
                </div>
              </td>
              <td class="td2">
                {{model.icon}}
              </td>
              <td class="td3" v-if="model.menuType === 1">目录</td>
              <td class="td3" v-if="model.menuType === 2">菜单</td>
              <td class="td3" v-if="model.menuType === 3">按钮</td>
              <!--<td class="td3">{{model.menuType}}</td>-->
              <td class="td4">
                <span :title="model.menuUrl" class="ellipsis">{{model.menuUrl}}</span>
              </td>
              <td class="td5" v-if="model.sysType === 1">大数据处理</td>
              <td class="td5" v-if="model.sysType === 2">大数据支撑</td>
              <td class="td5" v-if="model.sysType === 3">大数据共享交换</td>
              <td class="td5" v-if="model.sysType === 4">大数据服务</td>
              <td class="td5" v-if="model.sysType === 5">大数据治理</td>
              <td class="td6">
                <a title="编辑" class="icon" href="javascript:;" @click="actionFunc(model)">
                  <i class="iconfont icon-tianxie"></i>
                </a>
                <a title="删除" class="icon" href="javascript:;" @click="deleteFunc(model)">
                  <i class="iconfont icon-shanchu"></i>
                </a>
                <a title="新增" class="icon" href="javascript:;" @click="addFunc(model)">
                  <i class="iconfont icon-jiahao"></i>
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <div v-show="model.isExpand" class="other-node" :class="otherNodeClass">
      <tree-item
        v-for="(m, i) in model.children"
        :key="String('child_node'+i)"
        :num='i'
        :root="1"
        @actionFunc="actionFunc"
        @deleteFunc="deleteFunc"
        @addFunc="addFunc"
        @handlerExpand="handlerExpand"
        :nodes.sync='model.children.length'
        :trees.sync='trees'
        :model.sync="m">
      </tree-item>
    </div>
  </div>
</template>

<script>
export default {
    name: 'treeItem',
    props: ['model', 'num', 'nodes', 'root', 'trees'],
    data () {
        return {
            parentNodeModel: null
        };
    },
    computed: {
        colSpan () {
            return this.root === 0 ? '' : 6;
        },
        tdClass () {
            return this.root === 0 ? 'td-border' : 'not-border';
        },
        levelClass () {
            return this.model ? 'leve-' + this.model.level : '';
        },
        childNodeClass () {
            return this.root === 0 ? '' : 'child-node';
        },
        otherNodeClass () {
            return this.model ? 'other-node-' + this.model.level : '';
        }
    },
    watch: {
    // 'model': {
    // handler() {
    // console.log('对象变化', this.model.isExpand)
    // },
    // deep: true
    // }
    },
    methods: {
        getParentNode (m) {
            // 查找点击的子节点
            var recurFunc = (data, list) => {
                data.forEach((l) => {
                    if (l.id === m.id) this.parentNodeModel = list;
                    if (l.children) {
                        recurFunc(l.children, l);
                    }
                });
            };
            recurFunc(this.trees, this.trees);
        },
        handlerExpand (m) {
            this.$emit('handlerExpand', m);
        },
        deleteFunc (m) {
            this.$emit('deleteFunc', m);
            // this.getParentNode(m)
            // console.log(this.parentNodeModel)
            // if (this.parentNodeModel.hasOwnProperty('children')) {
            // console.log('父级是跟节点', this.parentNodeModel)
            // this.parentNodeModel.children.splice(this.parentNodeModel.children.indexOf(m), 1)
            // } else if (this.parentNodeModel instanceof Array) {
            // console.log('跟节点', this.parentNodeModel)
            // this.parentNodeModel.splice(this.parentNodeModel.indexOf(m), 1)
            // }
        },
        actionFunc (m) {
            this.$emit('actionFunc', m);
        },
        addFunc (m) {
            this.$emit('addFunc', m);
        }
    },
    filters: {
        formatDate: function (date) {
            // 后期自己格式化
            return date; // Utility.formatDate(date, 'yyyy/MM/dd')
        }
    }
};
</script>
